<template>
    <div>
       <div class="title1"> 客户关系管理系统</div>

        <div class="title2"><b>南宁台鼎信息技术有限公司</b></div>
        <el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-position="left" class="demo-ruleForm card-box loginform">
            <el-form-item prop="account" >
              <el-input type="text" v-model="ruleForm2.account" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass" >
              <el-input type="password" v-model="ruleForm2.checkPass" auto-complete="off"  placeholder="密码" ></el-input>
            </el-form-item>
            <el-form-item style="width:100%;">
                <el-button type="success" style="width:100%;" @click.native.prevent="handleSubmit2" :loading="logining">登录</el-button>
            <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
        </el-form-item>
        </el-form>
     </div>
</template>

<script>
  import util from '../common/util'
  import QS from 'qs'

  export default {
    data() {
      return {
        logining: false,
        ruleForm2: {
          account: 'admin',
          checkPass: '123456'
        },
        rules2: {

        }
      };
    },
    methods: {
        switchLoading:function(flag){
            this.logining = flag;
        },
        handleReset2() {
           this.$refs.ruleForm2.resetFields();
        },
        handleSubmit2(ev) {
            if(!this.ruleForm2.account || !this.ruleForm2.checkPass){
                util.msgWarning("请输入用户和密码")
                return
            }
            var _this = this;
            this.$refs.ruleForm2.validate((valid) => {
              if (valid) {
                var loginParams = { userName: this.ruleForm2.account, password: this.ruleForm2.checkPass };
                var loginUrl = "Portal.aspx?cmd=login";
                util.post(loginUrl,loginParams,this.switchLoading,result => {
                    global.user = result.user
                    global.roles = result.roles
                    util.handleAuthority(result.authority)
                    this.$router.push({path: '/Main'})
                });
              } else {
                return false;
              }
            });
      }
    }
  }
</script>

<style scoped>
  .card-box {
    padding: 20px;
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    border-radius: 0px 0px 10px 10px;
    background-clip: padding-box;
    margin-bottom: 10px;
    background-color: #F9FAFC;
    margin: 0px auto;
    width: 400px;
    border: 2px solid #8492A6;
  }
  
  .title1 {
      margin: 2% 0px 0px 10%;
      text-align: left;
      font-family: 微软雅黑;
      font-size: 3em;
      margin-bottom: 2%;
      color: #fff;
  }

  .title2 {
    height: 35px;
      line-height:35px;
      width: 380px;
    margin: 10% auto 0px auto;
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: #879aa8;
    border-radius: 10px 10px 0px 0px;
  }
  
  .loginform {
    border: 0px solid #8492A6;
    width: 310px;
    padding: 35px 35px 15px 35px;
  }
    .el-button--success{
        color:#fff;
        background-color: #467a9e;
        border-color: #467a9e;
    }
</style>